<template>
	<!-- 2023年4月12号 刘振坤 -->
	<!-- 首页 -->
	<view style="width:96%;margin-left:2%;background:#FAF9F7;" @click="closeSelect">
		<!-- 搜索 -->
		<view style="width:94%;height:40px;margin-left:3%;margin-top:5px;">
			<u-search  bg-color="rgba(0,0,0,.1)" v-model="selectValue" shape="round" @change="selectCommodity"></u-search>
		</view>
		<!-- 轮播图 -->
		<view style="width:100%;height:200px;">
			<u-swiper :list="slideshowList" height="200px" radius="20px" circular :autoplay="true" keyName="image" @click="skip()"></u-swiper>
		</view>
		<!-- 搜索结果框 -->
		<view v-show = "selectShow" style="width:340px;height:150px;background-color: white;position:absolute;top:50px;margin-left: 10px;z-index: 1;">
			<view style="width:340px;height: 25px;margin-bottom: 8px;background-color:beige ;" v-for="item in selectResultList" @click="toCommodityDetail(item)">
				<p v-if="item.id" style="font-size:13px;font-weight: bold;">{{item.commodityName|ellipsisTitle}}</p>
				<p v-if="item.did" style="font-size:13px;font-weight: bold;">{{item.diyName|ellipsisTitle}}</p>
			</view>
			<!-- v-model="keyword" -->
		</view>
		<!-- 今日上新 拼团好货 签到积分 领劵中心 -->
		<view style="width:94%;height:70px;background:#fff;border-radius:10px;margin-left:3%;position:relative;top: -30px;">
			<!-- 今日上新 -->
			<view @click="toNewDaily()" style="width: 23%;height:70px;float:left;margin-left:4%;">
				<view style="width:100%;height:45px;text-align:center;">
					<span>
						<img style="width:60rpx;height:60rpx;margin-top:8px;" src="https://img.axureshop.com/30/51/cf/3051cf3093844023babaf2de5d97267c/images/%E9%A6%96%E9%A1%B5/u1030.png">
					</span>
				</view>
				<view style="width:100%;height:25px;line-height:25px;text-align:center;">
					<span style="color:grey;font-size:14px;">今日上新</span>
				</view>
			</view>
			<!-- 拼团好货 -->
			<view @click="toGroupingGoods()" style="width: 23%;height:70px;float:left;">
				<view style="width:100%;height:45px;text-align:center;">
					<span>
						<img style="width:60rpx;height:60rpx;margin-top:8px;" src="https://img.axureshop.com/30/51/cf/3051cf3093844023babaf2de5d97267c/images/%E9%A6%96%E9%A1%B5/u1033.png">
					</span>
				</view>
				<view style="width:100%;height:25px;line-height:25px;text-align:center;">
					<span style="color:grey;font-size:14px;">拼团好货</span>
				</view>
			</view>
			<!-- 签到积分 -->
			<view @click="toSignIn()" style="width: 23%;height:70px;float:left;">
				<view style="width:100%;height:45px;text-align:center;">
					<span>
						<img style="width:60rpx;height:60rpx;margin-top:8px;" src="https://img.axureshop.com/30/51/cf/3051cf3093844023babaf2de5d97267c/images/%E9%A6%96%E9%A1%B5/u1039.png">
					</span>
				</view>
				<view style="width:100%;height:25px;line-height:25px;text-align:center;">
					<span style="color:grey;font-size:14px;">签到积分</span>
				</view>
			</view>
			<!-- 领劵中心 -->
			<view @click="toCollarCenter()" style="width: 23%;height:70px;float:left;">
				<view style="width:100%;height:45px;text-align:center;">
					<span>
						<img style="width:60rpx;height:60rpx;margin-top:8px;" src="https://img.axureshop.com/30/51/cf/3051cf3093844023babaf2de5d97267c/images/%E9%A6%96%E9%A1%B5/u1036.png">
					</span>
				</view>
				<view style="width:100%;height:25pxline-height:25px;text-align:center;">
					<span style="color:grey;font-size:14px;">领劵中心</span>
				</view>
			</view>
		</view>
		<!-- 品牌商 人气推荐 拼团免邮 限时选购 -->
		<view style="width:94%;margin-left:3%;height: 170px;position:relative;top:-20px;">
			<view style="width: 65%;height: 170px;float:left;">
				<!-- 人气推荐 -->
				<view @click="toPopularRecommendation()" style="width:48%;height:170px;background:#fff;float:left;margin-right:4%;border-radius:10px;">
					<view style="width:100%;height:40px;text-align:center;line-height:40px;">
						<view>人气推荐</view>
					</view>
					<view style="width:100%;height:50px;">
						<img style="position:relative;left:40px;width:70px;height: 110px;top:5px;" src="https://img.axureshop.com/30/51/cf/3051cf3093844023babaf2de5d97267c/images/%E9%A6%96%E9%A1%B5/u800.png">
					</view>
					<!-- <view style="width:100%;height:130px;overflow:hidden;word-break:break-all;">
						<view style="width:100%;height:100px;">
							<img style="width: 100%;height: 100px;border-radius: 10px;" :src="'http://101.43.223.224:8765/image/getImageById?id='+(queryBasedOnSalesVolumeList[2].imageId==null?'':queryBasedOnSalesVolumeList[2].imageId.split(',')[0])">
						</view>
						<view style="width:100%;height:30px;line-height:30px;text-align:center;color:red;">
							￥{{queryBasedOnSalesVolumeList[2].price}}
						</view>
					</view> -->
				</view>
				<!-- 拼团免邮 -->
				<view @click="toGroupFreeShipping()" style="width:48%;height:170px;background:#fff;float:left;border-radius:10px;">
					<view style="width:100%;height:40px;text-align:center;line-height:40px;">
						<view>拼团免邮</view>
					</view>
					<view style="width:100%;">
						<img style="width:90px;height:140px;float:right;position:relative;top:-20px;right:5px;" src="https://img.axureshop.com/30/51/cf/3051cf3093844023babaf2de5d97267c/images/%E9%A6%96%E9%A1%B5/u790.png">
					</view>
					<!-- <view style="width:100%;height:130px;overflow:hidden;word-break:break-all;">
						<view style="width:100%;height:100px;">
							<img style="width: 100%;height: 100px;border-radius: 10px;" :src="'http://101.43.223.224:8765/image/getImageById?id='+(queryTheInformationOfGroupedProductsList[3].imageId==null?'':queryTheInformationOfGroupedProductsList[3].imageId.split(',')[0])">
						</view>
						<view style="width:100%;height:30px;line-height:30px;text-align:center;color:red;">
							￥{{queryTheInformationOfGroupedProductsList[3].price}}
						</view>
					</view> -->
				</view>
			</view>
			<!-- 限时选购 -->
			<view @click="toLimitedTimePurchase()" style="width:35%;height:170px;float:left;position: relative;">
				<view style="width:90%;height: 170px;margin-left:10%;border-radius:10px;background:#fff;">
					<view style="width:100%;height:40px;text-align:center;line-height:40px;">
						<view>限时选购</view>
					</view>
					<view style="width:100%;">
						<img style="width:40px;height:60px;margin-left: 14rpx;position: absolute;bottom: 0rpx;right: 110rpx;" src="https://img.axureshop.com/30/51/cf/3051cf3093844023babaf2de5d97267c/images/%E9%A6%96%E9%A1%B5/u800.png">
						<img style="width:70px;height:110px;position: absolute;bottom: 0rpx;right: 0rpx;" src="https://img.axureshop.com/30/51/cf/3051cf3093844023babaf2de5d97267c/images/%E9%A6%96%E9%A1%B5/u800.png">
					</view>
					<!-- <view style="width:100%;height:130px;overflow:hidden;word-break:break-all;">
						<view style="width:100%;height:100px;">
							<img style="width: 100%;height: 100px;border-radius: 10px;" :src="'http://101.43.223.224:8765/image/getImageById?id='+(queryFlashKillInformationList[0].imageId==null?'':queryFlashKillInformationList[0].imageId.split(',')[0])">
						</view>
						<view style="width:100%;height:30px;line-height:30px;text-align:center;color:red;">
							￥{{queryFlashKillInformationList[0].seckillPrice}}
						</view>
					</view> -->
				</view>
			</view>
		</view>
		<!-- 热销商品 -->
		<view style="width:96%;height:380px;position:relative;top:-10px;margin-left:2%;">
			<view style="width:100%;height:20px;">
				<span style="float:left;">热销商品</span>
				<span @click="toHotSellingProducts()" style="float:right;position:relative;top:2px;margin-right:4px;"><u-icon name="arrow-right"></u-icon></span>
				<span @click="toHotSellingProducts()" style="float:right;font-size:14px;color:gray;">更多</span>
			</view>
			<!-- overflow:hidden;word-break:break-all; -->
			<view style="margin-top:10px;width:100%;height:360px;overflow:hidden;">
				<view @click="toGoodsView(item.id)" v-for="(item, index) in commodityList" :key="index" style="width:30%;height:180px;float:left;margin-right:11px;background:#fff;">
					<view style="width:100%;height:100px;">
						<img style="width:100%;height:100px;border-radius:10px;" :src="'http://101.43.223.224:8765/image/getImageById?id='+(item.imageId==null?'':item.imageId.split(',')[0])">
					</view>
					<view style="margin-top:10px;width:100%;height:60px;text-align:center;overflow:hidden;word-break:break-all;">
						<view style="font-size:14px;color:red;font-weight:bold;">￥{{item.price}}</view>
						<view style="font-size:14px;">{{item.commodityName}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- diy商品 -->
		<view style="width:96%;height:380px;position:relative;top:10px;margin-left:2%;">
			<view style="width:100%;height:20px;">
				<span style="float:left;">DIY商品</span>
				<span @click="toDIYclassPage" style="float:right;position:relative;top:2px;margin-right:4px;"><u-icon name="arrow-right"></u-icon></span>
				<span @click="toDIYclassPage" style="float:right;font-size:14px;color:gray;">更多</span>
			</view>
			<view style="margin-top:10px;width:100%;height:360px;overflow:hidden;word-break:break-all;">
				<view @click="toDIYView(item.id)" v-for="(item, index) in getHandworkDiyListByIdsList" :key="index" style="width:30%;height:180px;float:left;margin-right:11px;background:#fff;">
					<view style="width:100%;height:100px;">
						<img style="width:100%;height:100px;border-radius:10px;" :src="'http://101.43.223.224:8765/image/getImageById?id='+item.diyImageId">
					</view>
					<view style="margin-top:10px;overflow:hidden;word-break:break-all;width:100%;height:60px;text-align:center;">
						<view style="font-size:14px;color:red;font-weight:bold;">￥{{item.diyFavorablePrice}}</view>
						<view style="font-size:14px;">{{item.diyName}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部提示 -->
		<view style="width: 100%;margin-top: 50px;float: left;">
			<view style="width: 37.6%;float: left;">
				<u-line color="grey"></u-line>
			</view>
			<view style="float: left;margin-left: 2.5%;margin-right: 2%;font-size: 14px;position: relative;top: -10px;color: grey;">已经到底了</view>
			<view style="width: 37.5%;float: left;">
				<u-line color="grey"></u-line>
			</view>
		</view>
		<view style="width: 100%;height: 30px;float: left;"></view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [],
				// 热销饰品top10
				CommdityBylist: [],
				// 轮播图集合
				slideshowList: [],
				// 商品信息列表
				commodityList: [],
				// diy商品信息列表
				getHandworkDiyListByIdsList: [],
				// 搜索栏框值
				selectValue:'',
				// 搜索栏搜索结果
				selectResultList:'',
				// 搜索栏结果框
				selectShow:false,
				// 根据商品表中购买量进行排序查询列表 人气推荐
				queryBasedOnSalesVolumeList: [],
				// 拼团包邮查询商品信息
				queryTheInformationOfGroupedProductsList: [],
				// 查询秒杀表中是信息方法
				queryFlashKillInformationList: []
			}
		},
		onLoad() {
			// 查询轮播图
			this.selectSlideshow()
			this.queryTheInformationOfGroupedProducts()
			this.queryDIYInformation()
			this.queryByCriteriaUserDetail()
			this.queryByCriteriaUserDetail1()
			this.queryFlashKillInformation()
		},
		methods: {
			// 查询秒杀表中是信息方法
			queryFlashKillInformation(){
				this.$myRequest({
					url: '/limitedTimePurchase/queryFlashKillInformation',
					// data: {
					// 	commodityName: this.commodityName
					// }
				}).then(res=>{
					this.queryFlashKillInformationList = res.data.data
				})
			},
			// 拼团包邮查询商品信息
			queryByCriteriaUserDetail1(){
				this.$myRequest({
					url: '/groupFreeShipping/queryTheInformationOfGroupedProducts',
				}).then(res=>{
					this.queryTheInformationOfGroupedProductsList = res.data.data
				})
			},
			// 根据商品表中购买量进行排序查询方法 人气推荐
			queryByCriteriaUserDetail(){
				this.$myRequest({
					url: '/popularRecommendation/queryBasedOnSalesVolume',
				}).then(res=>{
					this.queryBasedOnSalesVolumeList = res.data.data
				})
			},
			// 查询diy商品信息
			queryDIYInformation(){
				this.$myRequest({
					url: '/handworkDiy/queryDIYInformation'
				}).then(res => {
					this.getHandworkDiyListByIdsList = res.data.data
				})
			},
			// 查询商品信息
			queryTheInformationOfGroupedProducts(){
				this.$myRequest({
					url: '/groupFreeShipping/queryTheInformationOfGroupedProducts'
				}).then(res => {
					this.commodityList = res.data.data
				})
			},
			// 轮播图跳转
			skip(e){
				uni.navigateTo({
					url: this.slideshowList[e].url + this.slideshowList[e].carouselId,
				})
			},
			// 查询轮播图
			selectSlideshow(){
				this.$myRequest({
					url: '/newDaily/selectSlideShow'
				}).then(res => {
					this.slideshowList = res.data.data
					for (var i = 0; i < this.slideshowList.length; i++) {
						this.slideshowList[i].image = 'http://101.43.223.224:8765/image/getImageById?id=' + this.slideshowList[i].imageId
					}
				})
			},
			// 跳转DIY详情页面
			toDIYView(id){
				uni.navigateTo({
					url: '/pages/diy/DIYView?id='+id
				})
			},
			// 跳转DIY商品页面
			toDIYclassPage(){
				uni.navigateTo({
					//保留当前页面，跳转到应用内的某个页面
					url: '/pages/diy/DIYShop'
				})
			},
			// 跳转热销商品页面
			toHotSellingProducts(){
				uni.navigateTo({
					//保留当前页面，跳转到应用内的某个页面
					url: '/pages/index/HotSellingProducts'
				})
			},
			// 跳转商品详情
			toGoodsView(id){
				uni.navigateTo({
					//保留当前页面，跳转到应用内的某个页面
					url: '/pages/goods/GoodsView?id='+id
				})
			},
			// 跳转至限时选购页面
			toLimitedTimePurchase(){
				uni.navigateTo({
					//保留当前页面，跳转到应用内的某个页面
					url: '/pages/index/LimitedTimePurchase',
				})
			},
			// 跳转至人气推荐页面
			toPopularRecommendation(){
				uni.navigateTo({
					//保留当前页面，跳转到应用内的某个页面
					url: '/pages/index/PopularRecommendation',
				})
			},
			// 跳转至拼团免邮页面
			toGroupFreeShipping(){
				uni.navigateTo({
					//保留当前页面，跳转到应用内的某个页面
					url: '/pages/index/FreeOfPostage',
				})
			},
			// 跳转到今日上新页面
			toNewDaily(){
				uni.navigateTo({
					url: '/pages/index/NewDaily'
				})
			},
			// 跳转到拼团好货页面
			toGroupingGoods(){
				uni.navigateTo({
					url: '/pages/index/GroupingGoods'
				})
			},
			// 跳转到签到积分页面
			toSignIn(){
				uni.navigateTo({
					url: '/pages/index/SignIn'
				})
			},
			// 跳转到领卷中心页面
			toCollarCenter(){
				uni.navigateTo({
					url: '/pages/index/CollarCenter'
				})
			},
			// 搜索栏查询
			selectCommodity(){
				if(this.selectValue ==''){
					this.selectShow = false
					return
				}
				this.$myRequest({
					url:'/handworkDiy/selectCommodity',
					data:{
						selectValue:this.selectValue,
					}
				}).then(res=>{
					this.selectResultList = res.data.data
					this.selectShow = true
				})
			},
			// 点击关闭搜索栏结果框
			closeSelect(){
				this.selectShow = false
			},
			// 跳转对应的商品详情
			toCommodityDetail(item){
				this.selectShow = false
				if(item.id == null)
				{
					// 跳转DIY详情页面
					uni.navigateTo({
						url: '/pages/diy/DIYView?id='+item.did
					})
				}
				if(item.did == null){
					uni.navigateTo({
						//保留当前页面，跳转到应用内的某个页面
						url: '/pages/goods/GoodsView?id='+item.id
					})
				}
			}
		},
		// 显示字段超出相应长度后截取 可设置多个
		  filters: {
			ellipsis(value) {
			  if (!value) return "";
			  if (value.length > 30) {
				return value.slice(0, 30) + "...";
			  }
			  return value;
			},
			ellipsisTitle(value) {
			  if (!value) return "";
			  if (value.length > 25) {
			  // 截取长度
				return value.slice(0, 25) + "...";
			  }
			  return value;
			},
		  },
		onShow() {
			this.selectShow = false
			this.selectValue = ''
		}
	}
</script>
<style>
</style>
